<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);

const initChart = async () => {
  try {
    const response = await fetch('/china.json'); // Assumes china.json is in the public folder
    const chinaJson = await response.json();
    echarts.registerMap('china', chinaJson);
    
    const myChart = echarts.init(chartRef.value);

    const geoData = [
        { name: '上海', value: [121.48, 31.22, 100] },
        { name: '北京', value: [116.46, 39.92, 80] },
        { name: '广州', value: [113.23, 23.16, 60] },
    ];

    const option = {
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.2,
        itemStyle: {
          areaColor: 'rgba(0, 162, 255, 0.2)',
          borderColor: '#00a2ff',
          borderWidth: 1.5,
        },
        emphasis: {
            itemStyle: {
                areaColor: 'rgba(0, 162, 255, 0.5)',
            },
            label: {
                show: false
            }
        },
      },
      series: [
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: geoData,
          symbolSize: function (val) {
            return val[2] / 5;
          },
          rippleEffect: {
            brushType: 'stroke',
          },
          label: {
            show: true,
            formatter: '{b}',
            position: 'right',
            color: '#fff',
            fontSize: 14,
          },
          itemStyle: {
            color: '#00e5ff',
            shadowBlur: 10,
            shadowColor: '#333',
          },
          zlevel: 1,
        },
      ],
    };

    myChart.setOption(option);
  } catch (error) {
    console.error("Failed to load map data or init chart:", error);
  }
};

onMounted(() => {
  initChart();
});
</script> 